<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>线性渐变</title>
	<style type="text/css">
    section, h1 {
        margin: 60px;
    }

    .gradient {
      width: 260px;
      height: 100px;
    }
    .gradient-default {
      background: linear-gradient(orange, yellow); 
    }
    .gradient-utd {
      background: linear-gradient(to right, orange, yellow);
    }
    .gradient-angel {
      background: linear-gradient(135deg, orange, yellow); 
    }
    .gradient-colors {
      background: linear-gradient(to right, red, orange, yellow, white);
    }
    .gradient-colorposition {
      background: linear-gradient(to right, orange, yellow 70%, red);  
    }
    .gradient-opactity {
      background: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1));
    }
    .gradient-repeat {
      background: repeating-linear-gradient(-45deg, blue, blue 5px, white 5px, white 10px);
    }
	</style>
</head>
<body>
<h1>线性渐变</h1>

<section>
<h2>从上到下的线性渐变</h2>
<pre>
.gradient-default {
    background: linear-gradient(orange, yellow);
}
</pre>
<div class="gradient gradient-default"></div>
</section>

<section>
<h2>从左到右的线性渐变</h2>
<pre>
.gradient-utd {
    background: linear-gradient(to right, orange, yellow);
}
</pre>
<div class="gradient gradient-utd"></div>
</section>

<section>
<h2>使用角度的线性渐变</h2>
<pre>
.gradient-angel {
    background: linear-gradient(135deg, orange, yellow);
}
</pre>
<div class="gradient gradient-angel"></div>
</section>

<section>
<h2>指定多个等间距的色标</h2>
<pre>
.gradient-colors {
    background: linear-gradient(to right, red, orange, yellow, white);
}
</pre>
<div class="gradient gradient-colors"></div>
</section>

<section>
<h2>指定多个指定位置的色标</h2>
<pre>
.gradient-colorposition {
    background: linear-gradient(to right, orange, yellow 70%, red);
}
</pre>
<div class="gradient gradient-colorposition"></div>
</section>

<section>
<h2>使用透明度</h2>
<pre>
.gradient-opactity {
    background: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1));
}
</pre>
<div class="gradient gradient-opactity"></div>
</section>

<section>
<h2>重复的线性渐变</h2>
<pre>
.gradient-repeat {
    background: repeating-linear-gradient(-45deg, blue, blue 5px, white 5px, white 10px);
}
</pre>
<div class="gradient gradient-repeat"></div>
</section>
  
</body>
</html>

